<template>
  <div class="title">
    <div class="list">
      <span class="icon"></span>
      <span>死亡/失踪情况</span>
    </div>

    <div class="list">
      <button @click="handleZJ" :class="['btn', activeIndex === 0 ? 'active' : '']">震级</button>
      <button @click="handleYear" :class="['btn', activeIndex === 1 ? 'active' : '']">年份</button>
    </div>
  </div>
  <div class="chartbox" ref="chartRef"> </div>
</template>  
  
<script setup>
import { ref, onMounted, onUnmounted, defineExpose } from 'vue'
import * as echarts from 'echarts'

const activeIndex = ref(0)
const handleZJ = () => {
  if (activeIndex.value === 0) return
  activeIndex.value = 0
  updateChart()
}
const handleYear = () => {
  if (activeIndex.value === 1) return
  activeIndex.value = 1
  updateChart()
}

var lineOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    top: '5%',
    left: 'right',
    icon: 'circle',
    textStyle: {
      color: '#fff'
    }
  },
  grid: {
    top: 40,
    right: 20,
    left: 50,
    bottom: 40
  },
  xAxis: {
    type: 'category',
    axisLine: {
      lineStyle: {
        color: '#B9EEFF'
      }
    },
    axisTick: { show: false },
    axisLabel: {
      margin: 10,
      color: '#B9EEFF',
      textStyle: {
        fontSize: 14,
        color: '#B9EEFF'
      }
    }
  },
  yAxis: {
    axisLabel: {
      formatter: '{value}',
      color: '#B9EEFF'
    },
    name:"人",
    axisLine: {
      show: false,
      lineStyle: {
        color: '#fff'
      }
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255,255,255,0.12)'
      }
    }
  },
  series: [
    {
      name: '死亡',
      type: 'line',
      symbolSize: 1,
      symbol: 'circle',
      smooth: true,
      symbolSize: 15, // 设置数据点大小为10px
      showSymbol: false,
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '  rgba(48, 111, 255, 0.5) '
              },
              {
                offset: 1,
                color: 'rgba(48, 111, 255, 0)'
              }
            ],
            false
          )
        }
      },
      lineStyle: {
        width: 3,
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          {
            offset: 0,
            color: ' rgba(48, 111, 255, 0.4795)'
          },
          {
            offset: 0.2,
            color: '#04A9F2 '
          },
          {
            offset: 0.5,
            color: '#306FFF '
          },
          {
            offset: 0.85,
            color: '  #04A9F2'
          },
          {
            offset: 1,
            color: 'rgba(48, 111, 255, 0)'
          }
        ])
      },
      itemStyle: {
        normal: {
          borderColor: 'white', // 设置数据点边框颜色为白色
          borderWidth: 3,
          color: '#04adf6',
          barBorderRadius: 12
        }
      }
    },
    {
      name: '失踪',
      type: 'line',
      symbolSize: 1,

      symbol: 'circle',
      smooth: true,
      symbolSize: 15, // 设置数据点大小为10px

      showSymbol: false,
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: ' rgba(48, 201, 201, 0.5) '
              },
              {
                offset: 1,
                color: 'rgba(48, 201, 201, 0)'
              }
            ],
            false
          )
        }
      },
      lineStyle: {
        width: 3,
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          {
            offset: 0,
            color: 'rgba(48, 201, 201, 0)'
          },
          {
            offset: 0.15,
            color: '#11F6F2'
          },
          {
            offset: 0.48,
            color: '#3FECC2  '
          },
          {
            offset: 0.89,
            color: ' #11F6F2  '
          },
          {
            offset: 1,
            color: ' rgba(48, 201, 201, 0)  '
          }
        ])
      },
      itemStyle: {
        normal: {
          borderColor: 'white', // 设置数据点边框颜色为白色
          borderWidth: 3,
          color: '#64f7d6',
          barBorderRadius: 12
        }
      }
    }
  ]
}

var barOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    top: '5%',
    left: 'right',
    icon: 'circle',
    textStyle: {
      color: '#fff'
    }
  },
  grid: {
    top: 40,
    right: 20,
    left: 50,
    bottom: 40
  },
  xAxis: {
    type: 'category',
    axisLine: {
      lineStyle: {
        color: '#B9EEFF'
      }
    },
    axisTick: { show: false },
    axisLabel: {
      margin: 10,
      color: '#B9EEFF',
      textStyle: {
        fontSize: 14,
        color: '#B9EEFF'
      }
    }
  },
  yAxis: {
    axisLabel: {
      formatter: '{value}',
      color: '#B9EEFF'
    },
     name:"人",
    axisLine: {
      show: false,
      lineStyle: {
        color: '#fff'
      }
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255,255,255,0.12)'
      }
    }
  },
  series: [
    {
      name: '死亡',
      barWidth: 30,
   
      type: 'bar',
      barWidth: '20px',
      itemStyle: {
        normal: {
          color:'#04adf6',
          barBorderRadius: [30, 30, 0, 0],
          shadowColor: 'rgba(1, 194, 255, 0)'
        }
      },
      label: {
        show: true,
        position: 'top', // 在柱状图的上方显示文字
        textStyle: {
          color: '#B9EEFF' // 文字颜色为黑色
        }
      }
    },
    {
      name: '失踪',
      barWidth: 30,
      itemStyle: {
        normal: {
          color:'#64f7d6',
          barBorderRadius: [30, 30, 0, 0],
           shadowColor: 'rgba(1, 194, 255, 1)'
        }
      },
      type: 'bar',
      barWidth: '20px',

      label: {
        show: true,
        position: 'top', // 在柱状图的上方显示文字
        textStyle: {
          color: '#B9EEFF' // 文字颜色为黑色
        }
      }
    }
  ]
}

const getData = (data) => {
  barOption.xAxis.data = data.yearData
  barOption.series[0].data = data.dieDataYear
  barOption.series[1].data = data.disappearDataYear

  lineOption.xAxis.data = data.data
  lineOption.series[0].data = data.dieData
  lineOption.series[1].data = data.disappearData
  initChart()
}

// 主动暴露childMethod方法
defineExpose({ getData })

const chartRef = ref(null)
let myChart = null
// 初始化图表
const initChart = () => {
  if (chartRef.value) {
    myChart = echarts.init(chartRef.value)
    myChart.setOption(activeIndex.value === 0 ? lineOption : barOption)
    window.addEventListener('resize', () => {
      myChart.resize()
    })
    // 指定图表的配置项和数据
  }
}

const updateChart = () => {
  myChart.setOption(activeIndex.value === 0 ? lineOption : barOption, true)
}

// 组件挂载后初始化图表
onMounted(() => {})

// 组件卸载时销毁图表实例，避免内存泄漏
onUnmounted(() => {
  if (chartRef.value) {
    echarts.dispose(chartRef.value.getEchartsInstance())
  }
})
</script>  
  
<style lang="scss" scoped>
.title {
  height: 52px;
  color: #fff;
  font-size: 18px;
  padding-left: 26px;
  padding-right: 26px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .list {
    height: 100%;
    display: flex;
    align-items: center;
  }
  .icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url(/static/assets/r1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 10px;
  }

  .btn {
    width: 82px;
    text-align: center;
    height: 33px;
    background-image: url(/static/assets/bno.png);
    background-size: 100% 100%;
    background-color: transparent;
    outline: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  .active {
    background-image: url(/static/assets/bactive.png);
    color: #fff;
  }
}

.chartbox {
  height: calc(100% - 52px);
}
</style>